<template>
  <div ref="mainRef" style="width: 100%; height: 600px"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, onUnmounted, ref, useTemplateRef } from "vue";
import http from "@/utils/http";

const mainRef = useTemplateRef("mainRef");
let myChart = null;
function chartInit() {
  myChart = echarts.init(mainRef.value);
  // 绘制图表
  myChart.setOption({
    title: {
      // 标题组件
      text: "ECharts 入门示例",
      left: "center",
      textStyle: {
        color: "#fff",
        sontSize: 20,
      },
    },
    tooltip: {
      // 提示框组件
      trigger: "axis",
      axisPointer: {
        // type: "shadow",
        type: "cross",
      },
      backgroundColor: "rgba(255,255,255,.5)",
      borderColor: "#ff0000",
      textStyle: {
        color: "blue",
        sontSize: 20,
      },
    },
    legend: {
      // 图例组件
      data: ["销量"],
      left: "right",
      textStyle: {
        color: "#fff",
        sontSize: 14,
      },
    },
    xAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
      /* axisLabel: {
        // rotate: 45,
        // 格式器：处理方式是对内容进行分割，在进行换行
        formatter: (val) => val.split("").join("\n"),
      }, */
    },
    yAxis: {
      type: "category",
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
        barWidth: 30,
        markPoint: {
          data: [
            { type: "max", name: "最大值" },
            { type: "min", name: "最小值" },
          ],
        },
        itemStyle: {
          color: function (params) {
            const colorList = ["green", "white", "blue", "yellow", "red", "purple"];
            return colorList[params.dataIndex];
          },
        },
      },
    ],
    grid: {
      left: "2%",
      right: "2%",
      top: "15%",
      bottom: "2%",
      containLabel: true,
    },
    toolbox: {
      // 可视化工具箱
      show: true,
      itemSize: 30,
      itemGap: 30,
      top: "20",
      iconStyle: {
        borderColor: "#fff",
      },
      emphasis: {
        iconStyle: {
          borderColor: "#ff0",
        },
      },
      feature: {
        saveAsImage: {
          name: "图片",
          title: "下载",
        },
        dataView: {
          // 数据视图
        },
        resotre: {},
        magicType: {
          // 动态类型切换
          type: ["line", "bar"],
        },
      },
    },
  });
}

function handleResize() {
  myChart.resize();
}

onMounted(async () => {
  /* let res = await http.get("get_echart");
  console.log(res); */

  chartInit();
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  myChart.dispose();
});
</script>

<style scoped></style>
